<template>
    <div>
        <div class="before">
            <li v-for="L in List" :key="L.id">
                <router-link :to="{
                    name:'Detail',
                    query:{
                        title:L.title,
                    }
                }" active-class="active1">
                    {{L.title}}
                
                </router-link>
            </li>
            <!-- <Lists/> -->
                <p>自定义事件</p>
                <input type="text" v-model="message" @keyup.enter="change">          
            <div class="box">
                
            </div>
            <router-view></router-view>
        </div>
    </div>
    
</template>

<script>
import Lists from '../components/Lists.vue'
export default {
    name:'OpenList',
    data() {
        return {
            List:[
                {id:'001',title:'吃饭'},
                {id:'002',title:'睡觉'},
                {id:'003',title:'学Vue'}
            ],
            message:'',
        }
    },
    methods: {
        change(){
            this.List.push({id:Math.random(),title:this.message})
            this.message = ''
        },
        
    }
}
</script>

<style>

    li {
        list-style: none;
    }
    a {
        color: black;
    }
    .active1 {
        display: none;
    }
</style>